<template>
  <div class="departments">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="用户管理" name="first" />

        <div class="box">
          <TreeTools :item="hearData" />
        </div>

        <!-- 水平线 -->
        <div class="horizontal" />
      </el-tabs>

      <!-- 下面的树状结构组件   -->
      <el-tree :data="data">
        <TreeTools
          slot-scope="{ data }"
          :item="data"
          @upDataDate="getDeptData"
          @addShow="addShow"
          @editShow="editShow"
        />
      </el-tree>
    </el-card>

    <!-- 新增 & 编辑 面板 -->
    <AddDepartment
      :id="currentId"
      ref="addEdit"
      :dialog-show.sync="dialogShow"
      :close-dialog.sync="dialogShow"
      @getDeptData="getDeptData"
    />
  </div>
</template>

<script lang="js">
import { getDepartmentApi } from '@/api/departments'
export default {
  name: 'Departments',
  components: {
    // 树状结构
    TreeTools: () => import('./component/treeTools.vue'),
    // 新增 & 编辑 面板
    AddDepartment: () => import ('./component/AddDepartment.vue')
  },
  data() {
    return {
      activeName: 'first',
      // 头部
      hearData: {
        label: '腾讯外包',
        isHear: true
      },
      data: [],
      // 新增 & 编辑 面板
      dialogShow: false,
      // 当前数据源 id
      currentId: ''
    }
  },
  created() {
    this.getDeptData()
  },
  methods: {
    // 打开编辑面板
    editShow(id) {
      console.log(id)
      this.dialogShow = true
      // 调用子组件中 addEdit 的方法 获取部门详情
      this.$refs.addEdit.getInquire(id)
    },
    // 打开 新增 面板
    addShow(id) {
      this.dialogShow = true
      // 保存当前点击的 id
      this.currentId = id
    },
    turnData(arr, pid) {
      const res = []
      arr.forEach(item => {
        if (item.pid === pid) {
          const son = this.turnData(arr, item.id)
          if (son !== 0) {
            item.children = son
          }
          res.push(item)
        }
      })
      return res
    },
    async  getDeptData() {
      const res = await getDepartmentApi()
      // console.log(res)
      this.data = this.turnData(res.data.depts, '')
      this.hearData = res.data.depts[0]
      this.hearData = '负责人'
      this.hearData.isHear = true
    }
  }
}
</script>

<style lang="scss">
.departments {
  margin: 20px 40px;
  .box {
    margin: 20px 50px;
    .incline {
      font-style: normal;
      margin-right: 5px;
    }
    span.el-dropdown-link.el-dropdown-selfdefine {
      font-size: 17px;
    }
  }
  .horizontal {
    border-bottom: 1px solid skyblue;
    margin: 20px 50px;
  }
}
</style>
